<template>
    <div class="group-list">
        <div class="details-list" v-for="(item , index) in shoplist" :key="index">
            <img :src="item.image">
            <div class="group-list" >
                <p class="name">{{item.mainTitle}}</p>
                <p class="madeIn">
                    <span>精品</span>
                    <span>{{item.subtitle}}</span>
                </p>
                <p class="msg">{{item.thirdContent}}</p>
                <div>
                        <p>
                            <span>原价:￥</span>
                            <span>{{item.priceStr}}</span>
                        </p>
                        <p>立即参团 ￥{{item.priceStr}}</p>
                </div>
                
            </div>
        </div>
  </div>
</template>

<script>
export default {
    props:['shoplist']
}
</script>

<style lang="stylus" scoped>
    .group-list
        width 100%
        .details-list
            width 100%
            padding 0.2rem 0.24rem
            display flex
            img 
                width 2.66rem
                height 2.66rem
            .group-list
                display flex
                flex-direction column
                justify-content space-around
                .name
                    color #4a4a4a
                    font-size 0.28rem
                .madeIn
                    display flex
                    align-content center
                    span:nth-of-type(1)
                        font-size 0.18rem
                        background-color #ab7fd1
                        padding 0 0.04rem
                        color #ffffff
                        margin-right 0.1rem
                        height 0.4rem
                    span:nth-of-type(2)
                        font-size 0.24rem
                        color #bf9e6b
                .msg
                    font-size 0.2rem
                    color #bbbbbb
                    padding 0.16rem 0
                div
                    width 100%
                    display flex
                    justify-content space-between
                    align-items center
                    p:nth-of-type(1){
                        span:nth-of-type(1){
                            font-size 0.24rem
                            color #f7a701
                        }
                        span:nth-of-type(2){
                            color #f7a701
                            font-size 0.32rem
                        }
                    }
                    p:nth-of-type(2){
                        width 1.88rem
                        height 0.64rem
                        padding 0 0.1rem
                        background-color #9d6ac1
                        line-height 0.64rem
                        text-align center
                        color #ffffff
                    }
</style>>
